iT邦幫忙

2021 iThome 鐵人賽

DAY 23
2
Modern Web

React.js 30 天學習全記錄系列 第 23

[ Day 23 ] Redux 中的核心概念

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20211006/20134153QIuBIRq0fH.png
上一篇 Day 22 我們已經了解了何謂 Redux 以及該套件的三大原則,今天就要來為大家介紹在 Redux 這個套件中的核心概念及功能名詞介紹。


主要的概念與功能

在 Redux 的官方文件當中有特別提到要開始使用前應該要了解的名詞和概念,所以這邊就幫大家把這些概念整理如下:

Actions

是一個帶有 typepayload 兩個屬性的 JavaScript 物件且在其屬性中會說明資料的改變內容為何?

這邊補充說明一下,Actions 物件中的 type 屬性通常會是字串並用來指定這個 Action 類型的名稱,而 payload 屬性則是用來做處理該 Action 物件被執行時需要添加或處理的資料內容( payload 這個屬性是非必要的,所以可以視需求加入即可)。

另外, type 屬性的命名方式通常會使用 事件分類/事件名稱 ,假設我們是做一個 ToDoList 的話可以這樣命名 Action 中的 type 屬性為: todos/todoAdded 當作該名稱(這個命名方式不是硬性規定,不過官方建議大家可以這樣做)。

/* 創建一個 Action 物件: addTodoAction */
const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Reducers

一個接收目前的 state 和指定的 action 這兩個參數的函式,並根據這兩個參數返回一個全新的 State 值。

依據官方文件的說明,我們可以這樣理解 Reducer 函式:

( 原本的 state, action 物件名稱) => 新的 state

你也可以把 Reducer 想像成是一個監聽( Event Listener )的物件,而且會根據函式內所指定的 action 類別來處理對應的事件。
另外,關於 Reducers 還有三個使用上必須遵守的原則:

  1. 新的 State 值一定都是參考 stateaction 這兩個參數所產生出來的
  2. 透過 Reducer 所產生的新的 State 值並不是直接修改原本的 State ,而是複製一份本來的 State 值並修改或更新它
  3. 不能做會產生 Side Effects (像是:非同步資料處理或任何會產生非預測的值的行為)的處理,因為 Reducer 本身就是一個 Pure Function

下面給大家看一個官方的簡易範例:

/* 宣告一個變數 initialState 並存放 State : value 的初始值為 0 */
const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
/* 若此 action : counter/increment 有被觸發的話就執行 return 內的行為 */
  if (action.type === 'counter/incremented') {
    return {
      ...state,
      /* 並在這邊更新複製的 State 值 +1 */
      value: state.value + 1
    }
  }
  return state
}

Store

在 Redux 套件中儲存我們整個應用程式中的 State 的地方,而且整個應用程式中只會有一個 Store 物件

我們會使用 Redux 套件中的 createStore 的方法來幫我們先建立一個全新的 Store 來存放 State 的值,再將我們需要存入此 Store 的內容(包含了 actionreducer 這兩個物件)匯入到這個 Store 當中。

備註:通常我們會在專案內建立個別的目錄來分別存放 actionreducerstore 等資料,這邊會需要載入的就是在 reducer 資料夾所建立的一個 rootReducer

import { createStore } from 'redux';
import rootReducer from './rootReducer';

const store = createStore(
  rootReducer
);

Dispatch

在 Redux 中唯一可以修改 Store 內所儲存到 State 值的方式就是將一個設定好的 Action 物件傳入到此方法內。

/* 將一個 type: 'counter/incremented' 的 action 物件傳入 dispatch 方法內 */
store.dispatch({ type: 'counter/incremented' })
/* 印出 store 內目前 state 最新被該 action 物件所修改過的值 */
console.log(store.getState())

關於 Redux 的功能還有它的核心概念就先為大家介紹到這了。我覺得 Redux 的章節真的比前面都要複雜一些,不單只是較多的功能和方法,最主要的原因是出在我並沒有實際使用 Redux 做開發,所以這些理論跟功能實在是有吸收但不曉得有沒有真的理解了哈哈。

所以下面這邊我想給大家提供幾篇前輩大大們的鐵人文章,裡面針對 Redux 的實際應用還有其他更進階的功能介紹。我個人是希望自己有實作並使用過後再來學習更進階的 Redux 使用方法,大大們的文章為大家整理如下:

那明天想跟大家介紹的是在 React.js 中撰寫樣式的方法,因為鐵人賽的最後我會實作一個 React.js 的網站,加上前面的章節都是著重在 React.js 的邏輯與功能部分,所以會在明天為大家補上畫面樣式的章節囉!
有任何問題一樣都非常非常歡迎提出和指教唷~
那我們下篇見ʘ‿ʘ


參考資料:


上一篇
[ Day 22 ] React 中的 State 管理 - Redux
下一篇
[ Day 24 ] React 中的樣式設定
系列文
React.js 30 天學習全記錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言